<template>
  <view class="floating-action-button" @click="onClick">
    <wd-icon name="add" size="24px" color="#fff"></wd-icon>
  </view>
</template>

<script>
export default {
  name: "FloatingActionButton",
  methods: {
    onClick() {
      this.$emit("click");
    },
  },
};
</script>

<script setup>
// Vue 3 setup script
</script>

<style lang="scss" scoped>
.floating-action-button {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #ff8c00;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  z-index: 100;
  transition: all 0.3s;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  }
}
</style>
